// 数据-柱状图/线柱组合图
import React from 'react';
import { Radio } from 'antd';
import FormItem from 'antd/lib/form/FormItem';
import DragContainer from './Drag/DragContainer';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
	dragOver: ( value: string ) => void;
	currentDragNode: any;
}

const ChooseColumnType = ( props: IProps ) => {
	const { form, config = {}, onValuesChange, dragOver, currentDragNode } = props;
	const xName = 'xAxis';
	const yLName = 'yLAxis';
	const yRName = 'yRAxis';
	const seriesName = 'series';
	const { type } = config;
	return (
		<>
			{ type === 'Column' && ( <FormItem label="类型" name="columnType">
				<Radio.Group>
					<Radio value="column">柱状图</Radio>
					<Radio value="bar">条形图</Radio>
				</Radio.Group>
			</FormItem> )}
			{type === 'ColumnLine' && ( <FormItem label="类型" name="columnType">
				<Radio.Group>
					<Radio value="doubleY">双Y轴</Radio>
					<Radio value="oneY">同轴</Radio>
				</Radio.Group>
			</FormItem> )}
			{ type === 'StackedColumn' && ( <FormItem label="类型" name="columnType">
				<Radio.Group>
					<Radio value="stackedColumn">堆叠柱状图</Radio>
					<Radio value="stackedBar">堆叠条形图</Radio>
				</Radio.Group>
			</FormItem> )}
			<FormItem label="X轴/类别轴" name={xName}>
				<DragContainer
					form={form}
					name={xName}
					tip="拖入维度"
					type="dimension"
					config={config}
					dragOver={dragOver}
					currentDragNode={currentDragNode}
					onValuesChange={onValuesChange}
				></DragContainer>
			</FormItem>
			<FormItem label="Y轴/值轴" name={yLName}>
				<DragContainer
					form={form}
					name={yLName}
					tip="拖入度量"
					type="measure"
					config={config}
					dragOver={dragOver}
					currentDragNode={currentDragNode}
					onValuesChange={onValuesChange}
				></DragContainer>
			</FormItem>
			{type === 'ColumnLine' && ( <FormItem label="第二Y轴/值轴" name={yRName}>
				<DragContainer
					form={form}
					name={yRName}
					tip="拖入度量"
					type="measure"
					config={config}
					dragOver={dragOver}
					currentDragNode={currentDragNode}
					onValuesChange={onValuesChange}
				></DragContainer>
			</FormItem> )}
			<FormItem label="颜色图例" name={seriesName}>
				<DragContainer
					form={form}
					name={seriesName}
					tip="拖入维度"
					type="dimension"
					config={config}
					dragOver={dragOver}
					currentDragNode={currentDragNode}
					onValuesChange={onValuesChange}
				></DragContainer>
			</FormItem>
		</>
	);
};

export default React.memo( ChooseColumnType );
